<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <!-- 查询条件 -->
    <el-form :model="searchModel" ref="searchForm" label-width="80px" :inline="true" size="small">
      <el-form-item>
        <el-input v-model="searchModel.uAccount" placeholder="请输入账号" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchModel.uName" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchModel.collegeName" placeholder="请输入学院" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchModel.majorName" placeholder="请输入专业" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchModel.className" placeholder="请输入班级" />
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" type="primary" @click="search()">查询</el-button>
        <el-button icon="el-icon-delete" @click="resetValue()">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 用户信息列表 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row
      class="tableBox">
      <el-table-column label="账号" width="120" align="center" height="">
        <template slot-scope="scope">
          <span>{{ scope.row.uaccount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.uname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="性别" width="80" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.sex === 1 ? '男' : '女' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="学院" width="180" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.collegeName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="班级" width="140" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.className }}</span>
        </template>
      </el-table-column>
      <el-table-column label="学分绩点" width="120" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.gpa }}</span>
        </template>
      </el-table-column>
      <el-table-column label="加分绩点" width="120" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.addGpa }}</span>
        </template>
      </el-table-column>
      <el-table-column label="总绩点" width="120" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.totalGpa }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100" align="center">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status == 1">正常</el-tag>
          <el-tag type="danger" v-else-if="scope.row.status == 2">已删除</el-tag>
          <el-tag type="danger" v-else>状态异常</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" v-if="scope.row.status == 1" type="danger"
            @click="changeStatus(scope.row)">删除</el-button>
          <el-button size="mini" v-if="scope.row.status == 2" type="success"
            @click="changeStatus(scope.row)">恢复</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <!-- 分页工具栏 -->
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="pageNo" :page-sizes="[10, 20, 30, 40, 50]" :page-size="10"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <!-- 修改对话框 -->
    <el-dialog width="35%" :title="`编辑 ${uname}`" :visible.sync="dialogFormVisible" center>
      <el-form :inline="true" :model="formInline">
        <el-form-item label="姓名">
          <el-input v-model="formInline.uname" placeholder="姓名" />
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="formInline.sex" placeholder="性别" />
        </el-form-item>
        <el-form-item label="学分绩点">
          <el-input v-model="formInline.gpa" placeholder="学分绩点" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" :loading="buttonLoading" @click="update">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 假设 getUserList 是从 API 获取用户列表的方法
import { getUserList, removeUserById, updateUser } from '@/api/user'
export default {
  data() {
    return {
      list: null, // 查询数据列表
      listLoading: true,
      // 搜索字段
      searchModel: {
        uAccount: '',
        uName: '',
        collegeName: '',
        majorName: '',
        className: '',
        pageNo: 1,
        pageSize: 10
      },
      pageNo: 1, // 当前页码
      pageSize: 10, // 每页显示数量
      total: 0, // 总数量
      // 修改对话框
      dialogFormVisible: false,
      uname: null,
      formInline: {
        id: null,
        gpa: 0,
        sex: '',
        uname: ''
      },
      buttonLoading: false
    }
  },
  created() {
    // this.fetchData()
    this.search()
  },
  methods: {
    search(pageNo = 1, pageSize = 10) {
      this.listLoading = true
      this.searchModel.pageNo = pageNo
      this.searchModel.pageSize = pageSize
      console.log(this.searchModel)
      getUserList(this.searchModel).then(res => {
        if (res.code === 200) {
          this.list = res.data.records
          this.total = res.data.total
          this.listLoading = false
        }
      })
    },
    /**   * 当每页数量发生变化时触发该事件   */
    handleSizeChange(size) {
      this.pageSize = size
      // 将每页显示的数量交给成员变量
      this.search(this.pageNo, size)
    },
    /**
     * * 当页码发生变化时触发该事件
     * */
    handleCurrentChange(page) {
      this.pageNo = page
      // 调用查询方法
      this.search(page, this.pageSize)
    },
    /**
     * * 重置查询条件
     *  */
    resetValue() {
      // 清空查询条件
      this.searchModel = {}
      // 重新查询
      this.search()
    },

    handleEdit(row) {
      this.formInline.id = row.id
      this.uname = row.uname
      this.formInline.uname = row.uname
      this.formInline.sex = row.sex === 1 ? '男' : '女'
      this.formInline.gpa = row.gpa
      this.dialogFormVisible = true
    },
    update() {
      console.log(this.formInline)
      updateUser(this.formInline).then(res => {
        if (res.code === 200) {
          this.$message.success('修改成功')
          this.search()
        } else {
          this.$message.error('修改失败')
        }
      })
      this.dialogFormVisible = false
    },
    // 删除，改变状态
    changeStatus(row) {
      this.$confirm('修改该用户状态, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeUserById(row.id).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.search()
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
<style scoped>
.page {
  margin-top: 15px;
  text-align: center;
}

.tableBox>>>td {
  padding: 0;
  height: 50px;
  /* line-height: 40px; */
}
</style>
